{% extends 'layouts/base.html' %}

{% block title %}
    {{ title }}
{% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="container-fluid py-4">
        <div class="row mt-4">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header pb-0">
                        <h6>指标权重收集：{{ model.name }}</h6>
                        <p class="font-weight-bold text-wrap text-sm">
                            {% block page_desc %}
                                请先阅读右侧各指标含义，以及右下方模型结构图后，再填写问卷
                            {% endblock page_desc %}
                        </p>
                    </div>
                    <div class="card-body p-3" style="overflow-y:auto; height: 1420px">
                        <div class="d-flex flex-column h-100">
                            <form role="form text-left" method="post"
                                  action="{% url 'weight' model_id %}">

                                {{ formset.management_form }}
                                {% csrf_token %}
                                {% for question in question_list %}
                                    <label for="{{ question.form.point.id_for_label }}">
                                        您认为 {{ question.antecedent }} 比 {{ question.succedent }} ：
                                    </label>
                                    <div class="mb-3">
                                        {{ question.form.point }}
                                    </div>
                                    <span class="text-error">{{ question.form.point.errors }}</span>
                                {% endfor %}

                                <div class="text-center">
                                    {% if user_type == "Respondent" %}
                                        <button type="submit" name="create_weight"
                                                class="btn bg-gradient-info w-100 mt-4 mb-0">
                                            Submit
                                        </button>
                                    {% endif %}
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">

                <div class="card">
                    <div class="card-header pb-0">
                        <h6>模型背景信息</h6>
                        <p class="font-weight-bold text-wrap text-sm">
                            模型名称：{{ model.name }}<br>
                            模型描述：{{ model.desc }}<br>
                        </p>
                    </div>
                    <div class="card-body p-3" style="overflow-y:auto;  height: 610px">
                        <table class="table align-items-center mb-0">
                            <thead>
                            <tr>
                                <th><h6>准则名称</h6></th>
                                <th><h6>准则含义</h6></th>
                            </tr>
                            </thead>
                            <tbody class="p-3">
                            {% for name, desc in nodes.items %}
                                <tr class="p-3">
                                    <td>
                                        <span class="font-weight-bold">{{ name }}</span>
                                    </td>
                                    <td><span class="text-wrap">{{ desc }}</span></td>
                                </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <h6 class="mt-4">{{ model.name }} 模型结构示意图</h6>
                                <p class="text-sm">
                                    <br>
                                    <span class="font-weight-bold">点击结点，可以展开或收起子结点</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    {% include 'project/includes/model_canvas.html' %}
                </div>

            </div>
        </div>

        {% include "includes/footer.html" %}

    </div>

{% endblock content %}

<!-- Specific JS goes HERE -->
{% block javascripts %}

    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script>
        var win = navigator.platform.indexOf('Win') > -1;
        if (win && document.querySelector('#sidenav-scrollbar')) {
            var options = {
                damping: '0.5'
            }
            Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
        }
    </script>

{% endblock javascripts %}
